import React from 'react';
import { inject, observer } from 'mobx-react';

import './css';
import MultiLang from './multiLang';
import E8Form from './e8Form';
import E8QRCode from './e8QRCode';
import LoginBtn from './LoginBtn';

@inject('portalLoginStore')
@observer
class E8FormCloud extends React.Component {
    constructor(props) {
        super(props);
    }

    state={
        loadFinish: false,
    }

    getState = (props) => {
        if (!props) {
            props = this.props;
        }
        const { portalLoginStore } = this.props;
        const { state = {} } = portalLoginStore;
        const { loginSettingInfo = {} } = state;
        const { loginInfo, loginForm, isRememberPW } = props;

        let _state = Object.assign({}, state);
        let _loginSettingInfo = Object.assign({}, loginSettingInfo);
        if (loginInfo && loginForm) {
            let _loginInfo = Object.assign({}, loginSettingInfo.loginInfo, loginInfo);
            let _loginForm = Object.assign({}, loginSettingInfo.loginForm, loginForm);
            _loginSettingInfo.loginInfo = _loginInfo;
            _loginSettingInfo.loginForm = _loginForm;
            _state.loginSettingInfo = _loginSettingInfo;
            if (isRememberPW) {
                _state.isRememberPW = isRememberPW;
            }
        }
        return _state;
    }

    setLoginType = (props) => {
        const { portalLoginStore } = this.props;
        let { state, setStateAndCache } = portalLoginStore;
        state = this.getState(props);
        const { loginSettingInfo = {} } = state;
        const { showQrcode, defaultQrcode } = loginSettingInfo.loginInfo;
        if (showQrcode && defaultQrcode) {
            setStateAndCache('loginType', 'QRCode');
        } else {
            setStateAndCache('loginType', 'form');
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.loginInfo
            && (nextProps.loginInfo.showQrcode != this.props.loginInfo.showQrcode
            || nextProps.loginInfo.defaultQrcode != this.props.loginInfo.defaultQrcode
            || nextProps.loginInfo.onlyQrcode != this.props.loginInfo.onlyQrcode)
        ) {
            this.setLoginType(nextProps);
        }
    }

    componentWillMount() {
        const { portalLoginStore, isNeedGetLoginInfo } = this.props;

        if (isNeedGetLoginInfo == true) {
            portalLoginStore.getLoginInfo();
        } else {
            this.setLoginType();
        }

        this.setState({ loadFinish: true });
    }

    render() {
        const { loadFinish } = this.state;
        if (loadFinish) {
            const { portalLoginStore } = this.props;
            let { state, setStateAndCache, getElementStyle, labelObj } = portalLoginStore;
            state = this.getState();
            const {
                loginSettingInfo = {},
                loginType,
            } = state;
            let { loginInfo, loginForm } = loginSettingInfo;
            const { showQrcode, defaultQrcode, onlyQrcode } = loginInfo;
            const { color = '#ffffff' } = loginForm;
            let isSetting = false;
            if (this.props.isFormCloudSetting == true) {
                isSetting = true;
            }
            let positionDynamicCss = {};
            if (this.props.isPositionDynamicCss == true) {
                positionDynamicCss = getElementStyle(loginForm);
                positionDynamicCss.position = 'absolute';
            }
            return (
                <div className="e8FormCloud" style={{ ...positionDynamicCss, color }}>

                    <div className={`multilang-qrcode ${((isSetting && (!showQrcode || (showQrcode && !defaultQrcode && !onlyQrcode))) || (!isSetting && loginType == 'form')) ? '' : 'multilang-qrcode-scan'}`}>
                        <MultiLang ecId={`${this && this.props && this.props.ecId || ''}_MultiLang@aoxsoh`} isSetting={isSetting} getState={this.getState} overClass={((isSetting && (!showQrcode || (showQrcode && !defaultQrcode && !onlyQrcode))) || (!isSetting && loginType == 'form')) ? '' : 'e8login-multiLangList-scan'} />
                        {
                            (isSetting && showQrcode && !defaultQrcode && !onlyQrcode) || (!isSetting && showQrcode && loginType == 'form') ? (
                                <i className="qRCode-scan icon-coms-Scan" title={labelObj.smdl} onClick={() => setStateAndCache('loginType', 'QRCode')} />
                            ) : null
                        }
                    </div>
                    {
                        (isSetting && (!showQrcode || (showQrcode && !defaultQrcode && !onlyQrcode))) || (!isSetting && loginType == 'form') ? <E8Form ecId={`${this && this.props && this.props.ecId || ''}_E8Form@zuqcb4`} getState={this.getState} /> : <E8QRCode ecId={`${this && this.props && this.props.ecId || ''}_E8QRCode@pslore`} getState={this.getState} />
                    }
                    {
                        (isSetting && (!showQrcode || (showQrcode && !defaultQrcode && !onlyQrcode))) || (!isSetting && loginType == 'form') ? <LoginBtn ecId={`${this && this.props && this.props.ecId || ''}_LoginBtn@3q3fmu`} isSetting={isSetting} getState={this.getState} /> : null
                    }
                    {
                        (isSetting && showQrcode && defaultQrcode && !onlyQrcode) || (!isSetting && ((showQrcode && !onlyQrcode) || !showQrcode) && loginType != 'form') ? (
                            <div className="qRCode-revoke" >
                                <div title={labelObj.fh} className="qRCode-revoke-btn" onClick={() => setStateAndCache('loginType', 'form')}>{labelObj.fh}</div>
                            </div>
                        ) : null
                    }

                </div>
            );
        }
            return null;
    }
}

export default E8FormCloud;
